<template>
  <div>
    我的论坛-><span>{{ channelSpan }}</span>-><span>{{ themeSpan }}</span>
    主题：<span>{{ titleSpan }}</span><br>
    楼主：<span>{{ landLord }}</span><br>
    <img src="" width="168" height="168" id="head"><br>
    注册日期：<span>{{ date }}</span>
    主题：<span>{{ theme }}</span><br>@<span>{{ time }}</span><br>
    <span>{{ content }}</span>

    <table border="1" cellspacing="0" width="600">
      <thead>
      <tr>
        <th>标题</th>
        <th>内容</th>
        <th>回帖人</th>
      </tr>
      </thead>
      <tbody v-for="r in reply" :key="r.id">
      <tr>
        <td>{{ r.title }}</td>
        <td>{{ r.content }}</td>
        <td>{{ r.user.name }}</td>
      </tr>
      </tbody>
    </table>
    <br>

    <span>回复帖子</span><br>
    标题<input type="text" v-model="topic"><br>
    内容<textarea name="info" v-model="replyContent"></textarea><br>
    <input type="button" value="发表" @click="addReply()">
    <input type="button" value="重置" @click="reset()">
    <input type="button" value="预览">
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      channelSpan: "",
      themeSpan: "",
      titleSpan: "",
      landLord: "",
      date: "",
      theme: "",
      time: "",
      content: "",
      reply: {},
      topic: "",
      replyContent: "",
    }
  },
  created() {
    this.findById();
    this.findAll();
  },
  methods: {
    findById() {
      axios.get("/project/reply/findById").then(resp => {
        let info = resp.data;
        this.channelSpan = info.channel.name;
        this.themeSpan = info.title;
        this.titleSpan = info.title;
        this.landLord = info.user.name;
        this.head = "/project/img/" + info.user.head;
        this.date = info.user.date;
        this.theme = info.title;
        this.time = info.date;
        this.content = info.content;
      })
    },
    findAll() {
      axios.get("/project/reply/findAll").then(resp => {
        this.reply = resp.data;
      })
    },
    addReply() {
      axios.get("/project/reply/add", {
        params: {
          title: this.topic,
          content: this.replyContent,
        }
      }).then(resp => {
        if (resp.data == "ok") {
          this.$router.push({name: "Reply"});
          this.findAll();
        }
      })
    },
    reset() {
      this.topic = "";
      this.replyContent = "";
    },
  }
}

</script>

<style scoped>

</style>